<script lang="jsx">
import { defineComponent, reactive } from "vue";
export default defineComponent({
  setup() {
    const state = {
      menus: [
        {
          title: "服务管理",
          uri: "/index",
          icon: <monitor />,
        },
        {
          title: "系统监控",
          uri: "/dashboard",
          icon: <odometer />,
        },
        {
          title: "组件管理",
          icon: <grid />,
          subs: [{ title: "Nginx", uri: "/nginx" }],
        },
      ],
    };
    return () => (
      <el-menu
        default-active="2"
        class="aside"
        background-color="#222832"
        text-color="#fff"
        router
      >
        {state.menus.map((item, index) =>
          item.subs && item.subs.length ? (
            <el-sub-menu
              key={index}
              index="/ab"
              vSlots={{
                title: (
                  <div>
                    {" "}
                    {item.icon && <el-icon>{item.icon}</el-icon>}
                    {item.title}
                  </div>
                ),
              }}
            >
              {item.subs.map((sub, index) => (<el-menu-item index={sub.uri} key={index}>
                  {sub.icon && <el-icon>{sub.icon}</el-icon>}
                  {sub.title}
                </el-menu-item>))}
            </el-sub-menu>
          ) : (
            <el-menu-item index={item.uri} key={index}>
              {item.icon && <el-icon>{item.icon}</el-icon>}
              {item.title}
            </el-menu-item>
          )
        )}
      </el-menu>
    );
  },
});
</script>

<style>
.aside.el-menu {
  border-right: none !important;
}
.aside .el-submenu {
  border-top: 1px solid hsla(0, 0%, 100%, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.aside .el-submenu:first-child {
  border-top: none;
}
.aside .el-submenu [class^="el-icon-"] {
  vertical-align: -1px !important;
}
.aside .el-pagination {
  text-align: center;
  margin-top: 20px;
}
.aside .el-popper__arrow {
  display: none;
}
</style>
